<template>
  <view class="uni-goods-nav">
    <!-- 图标 -->
    <view class="goods-nav-info">
     <view class="icon-nav-info" >
       <view class="icon-info" v-if="iconInfo[0]"  @click="goodsIconBtn(iconInfo[0])">
          <view  class="iconfont" :class="[iconInfo[0].notIcon]"></view>
          <text class="iconfont-text">{{iconInfo[0].text}}</text>
        </view>
        <view class="icon-info" v-if="iconInfo[1]" @click="goodsIconBtn(iconInfo[1])">
           <view  class="iconfont" :class="[ $store.state.user.isCollect.status? iconInfo[1].seleteIcon : iconInfo[1].notIcon]"></view>
           <text class="iconfont-text">{{iconInfo[1].text}}</text>
         </view>
         <view class="icon-info" v-if="iconInfo[2]"  @click="goodsIconBtn(iconInfo[2])">
           <view class="prompt-icon" v-if="iconInfo[2].promptNum > 0">{{iconInfo[2].promptNum}}</view>
            <view  class="iconfont" :class="[ $store.state.user.isLike.status? iconInfo[2].seleteIcon : iconInfo[2].notIcon]"></view>
            <text class="iconfont-text">{{iconInfo[2].text}}</text>
         </view>
         <view class="icon-info" v-if="iconInfo[3]"  @click="goodsIconBtn(iconInfo[3])">
            <view  class="iconfont" :class="[iconInfo[3].notIcon]"></view>
            <text class="iconfont-text">{{iconInfo[3].text}}</text>
         </view>
     </view>
      
     <!-- 按钮 -->
      <view class="goods-nav-btn">
        <view class="join-goods" :style="{backgroundColor: goodsBtnList[0].color}" @click="goodsIconBtn(goodsBtnList[0].text)">
          <text>{{goodsBtnList[0].text}}</text>
        </view>
        <view class="buy-now-btn" :style="{backgroundColor: goodsBtnList[1].color}">
          <text>{{goodsBtnList[1].text}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {useStore} from 'vuex'
const store = useStore()
const emit = defineEmits(['click'])
const props = defineProps({
    iconInfo: {
      type: Array,
      default: () => ([])
    },
    goodsBtnList: {
      type: Array,
      default: () => ([])
    }
  })
  const iconBtn = ref(0)
  const iconShowList = ref([])
  const goodsIconBtn = (item) => {
    emit('click', item)
    
    // if(item.seleteIcon !== '' && store.state.user.isLike.type === item.notIcon) {
    //   store.commit('user/setLike')
    // }
  }
</script>

<style lang="scss">
.uni-goods-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  .goods-nav-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110rpx;
    width: 100%;
    background-color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    .icon-nav-info {
      display: flex;
      justify-content: flex-start;
      min-width: 80rpx;
      .icon-info {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 30rpx;
        color: #636b73;
        .iconfont {
          font-size: 50rpx;
        }
        .iconfont-text {
          font-size: 29rpx;
        }
        .prompt-icon {
          position: absolute;
          top: -12rpx;
          right: 0;
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          background-color: red;
          width: 30rpx;
          height: 30rpx;
          text-align: center;
          line-height: 30rpx;
          border-radius: 10rpx;
        }
      }
   }
    
    .goods-nav-btn {
      flex: 1;
      display: flex;
      align-items: center;
      min-width: 200rpx;
      .join-goods,.buy-now-btn {
        height: 80rpx;
        width: 50%;
        // background-color: red;
        font-size: 30rpx;
        font-weight: 600;
        color: #fff;
        text-align: center;
        line-height: 80rpx;
        border-radius: 40rpx 0 0 40rpx;
      }
      .buy-now-btn {
        // background-color: blue !important;
        border-radius: 0 40rpx 40rpx 0;
      }
    }
  }
}
</style>